Implement blog card link preview feature #246
Merged
+400
−1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implemented a blog card shortcode that displays rich link previews with:
- Automatic OGP metadata fetching (title, description, image)
- Manual parameter specification support
- Responsive design with dark theme styling
- Hover animations and effects
- CORS-friendly fetching via proxy service
Usage: {{< blogcard url="https://example.com" >}}
Contributor
プレビュー環境プレビュー環境が更新されました。 URL: https://blog.kyu08.com/pr-246/ Commit: ※ デプロイ完了まで数分かかる場合があります。 |
Contributor
OGP画像に差分はありませんOGP画像は最新の状態です。 |
Changes: - Remove border from blogcard for cleaner look - Add debug logging to blogcard.js for troubleshooting - Update documentation to recommend manual parameter specification - Add working examples for immediate testing - Improve error handling in OGP fetch logic The manual specification method is now recommended as the most reliable approach, with auto-fetch as a bonus feature.
Performance improvements: - Add multiple proxy fallback (corsproxy.io as primary, allOrigins as backup) - Implement 5-second timeout per proxy (max 10 seconds total) - Add loading animation while fetching OGP data - Log elapsed time for debugging This should significantly reduce the wait time from 10+ seconds to under 5 seconds in most cases.
This reverts commit b79a35f.
Contributor
There was a problem hiding this comment.
Pull Request Overview
このPRは、ブログカード機能を追加し、外部URLからOGP (Open Graph Protocol) 情報を自動取得して表示する機能を実装します。
主な変更点:
- OGP情報の自動取得とブログカードの動的更新機能
- レスポンシブ対応のブログカードスタイル
- Hugo shortcodeによるブログカード生成
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| static/style.css | ブログカードのスタイル定義、レスポンシブ対応、ローディングアニメーション |
| static/blogcard.js | OGP情報取得ロジック、プロキシサービス経由のフェッチ、DOM更新処理 |
| layouts/shortcodes/blogcard.html | Hugoショートコードテンプレート、パラメータ処理とHTML生成 |
| layouts/partials/extended_footer.html | blogcard.jsのスクリプト読み込み |
8 tasks
Contributor
Co-authored-by: Copilot <[email protected]>
* Initial plan * Fix async forEach issue - use Promise.all with map pattern Co-authored-by: kyu08 <[email protected]> --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: kyu08 <[email protected]>
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implemented a blog card shortcode that displays rich link previews with:
Usage: {{< blogcard url="https://example.com" >}}or just put URL in one line.